<template>
    <div class="layout">
        <form @submit.prevent="handleSubmit">
            <div class="title">
                <div class="radio-item">
                    <span>类型:</span>
                    <label>
                        <input type="radio" name="plan" value="1d" v-model="type" />
                        日计划
                    </label>
                    <label>
                        <input type="radio" name="plan" value="7d" v-model="type" />
                        周计划
                    </label>
                    <label>
                        <input type="radio" name="plan" value="1m" v-model="type" />
                        月计划
                    </label>
                </div>
            </div>
            <sub-date-plan ref="planRef" :type="type" />
            <button type="submit" class="submit-btn">确定</button>
        </form>
    </div>
</template>

<script lang="ts" setup>
//时间日期选择逻辑
import { watch } from 'vue-demi';

import { ref } from '@vue/composition-api';

import subDatePlan from '../src';

const defaultDate = ref<Array<{ [key: string]: string }>>([]);

const type = ref('1d');

watch(
    () => type.value,
    (newType) => {
        const currentType = newType;
        if (currentType === '1d') {
            defaultDate.value = [{ startDate: '00:00', endDate: '01:00' }];
        } else if (currentType === '7d') {
            defaultDate.value = [{ startDate: '1-00:00', endDate: '1-01:00' }];
        } else if (currentType === '1m') {
            defaultDate.value = [{ startDate: '1-00:00', endDate: '1-01:00' }];
        }
    },
    { immediate: true },
);

const planRef = ref<InstanceType<typeof subDatePlan> | null>(null);
const handleSubmit = () => {
    const timePlanData = planRef.value?.getData(type.value);
    console.log('提交的数据:', timePlanData);
};
</script>
<style lang="less" scoped>
.radio-item {
    display: flex;
    margin: 20px 0;
}
.radio-item {
    display: flex;
    margin: 20px 0;
}
.layout {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 10px;
}
.title {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 10px;
}
form {
    border: 1px solid #ccc;
    padding: 20px;
    width: 70vw;
}
.submit-btn {
    position: relative;
    left: 90%;
    background-color: rgba(0, 117, 255);
    color: #fff;
    border: none;
    border-radius: 3px;
    padding: 3px 10px;
}
</style>
